<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
</head>
<body>
	<div class="container">
		<select id="province" onchange="selectCity(this)">
			<option>--请选择--</option>
		</select>
		<select id="city" onchange="selectArea(this)">
			<option>--请选择--</option>
		</select>
		<select id="area" >
			<option>--请选择--</option>
		</select>
	</div>
	<script src="${pageContext.request.contextPath}/lib/jquery/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			$.ajax({
				type : "POST",
				dataType : "json",
				url : "${pageContext.request.contextPath}/selectArea?method=selectProvince",
				success : function(jsonObj){
					var html = "<option>--请选择--</option>";
					for(var i=0;i<jsonObj.length;i++){
						html += "<option value='"+jsonObj[i].id+"'>"+jsonObj[i].province+"</option>";
					}
					$("#province").html(html);
				}
			})
		})
		function selectCity(obj){
			$("#area option:gt(0)").remove();
			var provinceId = $(obj).val();
			$.ajax({
				url : "${pageContext.request.contextPath}/selectArea?method=selectCity",
				data : {"provinceId" : provinceId},
				type : "POST",
				dataType : "json",
				success : function(jsonObj){
					var html = "<option>--请选择--</option>";
					for(var i=0;i<jsonObj.length;i++){
						html += "<option value='"+jsonObj[i].id+"'>"+jsonObj[i].city+"</option>";
					}
					$("#city").html(html);
				}
			})
		}
		function selectArea(obj){
			var cityId = $(obj).val();
			$.ajax({
				url : "${pageContext.request.contextPath}/selectArea?method=selectArea",
				data : {"cityId" : cityId},
				type : "POST",
				dataType : "json",
				success : function(jsonObj){
					var html = "<option>--请选择--</option>";
					for(var i=0;i<jsonObj.length;i++){
						html += "<option value='"+jsonObj[i].id+"'>"+jsonObj[i].area+"</option>";
					}
					$("#area").html(html);
				}
			})
		}
	</script>
</body>
</html>